<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="账户套餐id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountPackageId">
              <a-input-number v-model="model.accountPackageId" placeholder="请输入账户套餐id" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="车辆id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carId">
              <a-input-number v-model="model.carId" placeholder="请输入车辆id" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="维度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="latitude">
              <a-input v-model="model.latitude" placeholder="请输入维度"  @click="toggleMapVisibility"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="经度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="longitude">
              <a-input v-model="model.longitude" placeholder="请输入经度"  @click="toggleMapVisibility"></a-input>
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">
            <a-button @click="toggleMapVisibility">显示/隐藏地图</a-button>
          </a-col>-->
          <a-col :span="24" v-if="showMap && model.latitude && model.longitude">
            <tencent-map
              ref="map"
              :visible="visibles"
              :longitude="model.longitude"
              :latitude="model.latitude"
              @dblclick="datass"
              @click="handleMapClick">
            </tencent-map>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="情况描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="desc">
              <a-textarea v-model="model.desc" rows="4" placeholder="请输入情况描述" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="处理状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handleStatus">
<!--              <a-input v-model="model.handleStatus" placeholder="请输入处理状态"  ></a-input>-->
              <a-select v-model="model.handleStatus" placeholder="请选择处理状态">
                <a-select-option v-for="item in handleStatusDict" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="风险处理人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="faultHandler">
<!--              <a-input v-model="model.faultHandler" placeholder="请输入风险处理人"  ></a-input>-->
              <j-select-user-by-dep store="id" v-model="model.faultHandler" ></j-select-user-by-dep>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="解决时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="resolvedDate">
              <j-date placeholder="请选择解决时间" v-model="model.resolvedDate" date-format="YYYY-MM-DD HH:mm:ss"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="报告时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reportedDate">
              <j-date placeholder="请选择报告时间" v-model="model.reportedDate" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </a-form-model-item>
          </a-col>

        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import TencentMap from "@comp/map/TencentMap";
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'RentalUrgentAssistForm',
    components: {
      TencentMap
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        showMap: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        visibles:false,
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        handleStatusDict:[
          {
            label: "待处理",
            value: "0"
          },{
            label: "处理中",
            value: "1"
          },{
            label: "已解决",
            value: "2"
          },{
            label: "已关闭",
            value: "3"
          }],
        validatorRules: {
           accountPackageId: [
              { required: true, message: '请输入账户套餐id!'},
           ],
           carId: [
              { required: true, message: '请输入车辆id!'},
           ],
           isDelete: [
              { required: true, message: '请输入是否删除（0：否、1：是）!'},
           ],
        },
        url: {
          add: "/rental/urgent-assist/add",
          edit: "/rental/urgent-assist/edit",
          queryById: "/rental/urgent-assist/queryById"
        },
        defaultLatitude: 39.9042, // 默认纬度（北京）
        defaultLongitude: 116.4074 // 默认经度（北京）
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      // 设置默认经纬度
      this.setDefaultCoordinates();
    },
    methods: {
      setDefaultCoordinates() {
        if (!this.model.latitude) {
          this.model.latitude = this.defaultLatitude;
        }
        if (!this.model.longitude) {
          this.model.longitude = this.defaultLongitude;
        }
      },
      datass(e){
        this.visibles = false
        //  this.provinceName=e.ad_info.province+e.ad_info.city+e.ad_info.district
        debugger;
        this.model.latitude=e.location.lat.toString();
        this.model.longitude=e.location.lng.toString();
        console.log("datass==================",this.model.latitude,this.model.longitude);
        //this.model.meshPointsType=1

        this.$forceUpdate()
        // this.$refs.form.validate(valid => {})
      },
      add () {
        this.edit(this.modelDefault);
      },
      toggleMapVisibility() {
        this.showMap = !this.showMap;
        this.visibles=!this.visibles
      },
      handleMapClick(e) {
        // 更新经纬度
        this.model.latitude = e.latLng.lat();
        this.model.longitude = e.latLng.lng();
        this.updateMapMarker();
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        // 编辑时也设置默认经纬度
        this.setDefaultCoordinates();
        this.updateMapMarker();
      },
      updateMapMarker() {
        if (this.$refs.map && this.model.latitude && this.model.longitude) {
          this.$refs.map.updateMarker(this.model.latitude, this.model.longitude);
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>